<template>
	<view class="mainPage whitePage" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="title" onlyHead noshadow></public-head>
		<view class="box">
			<view class="w100pc h2"></view>
			<!-- 医院名称 -->
			<view class="lrmg-30 fsb" style="height: 110rpx;border-bottom: 1rpx solid #F0F0F0;">
				<view class="" style="width: 20%;">
					<text style="color: #F55050;">*</text>
					<text class="f32" style="color: #323232;">医院名称</text>
				</view>
				<view class="flex aic" style="width: 75%;">
					<input type="text" placeholder="请填写医院名称" v-model="name" style="color: #323232;text-align: right;" placeholder-style="color:#909090" class="f28 w100pc" />
				</view>
			</view>
			<!-- 所在地区 -->
			<view class="lrmg-30 fsb" style="height: 110rpx;border-bottom: 1rpx solid #F0F0F0;" @click="showAction">
				<view class="" style="width: 20%;">
					<text style="color: #F55050;">*</text>
					<text class="f32" style="color: #323232;">所在地区</text>
				</view>
				<view class="flex aic jc-end" style="width: 75%;">
					<view class="mg-r-20" style="width: 70%;text-align: right;">
						{{address.Province}} {{address.City}} {{address.Country}}
					</view>
					<view class="flex aic pd-l-20 jc-end" style="border-left: 4rpx solid #F0F0F0;width: 25%;">
						<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/mykehu/dw.png" style="width:26rpx;height:32rpx" class=""></image>
						<view class="f28 mg-l-10" style="color: #909090;">定位</view>
					</view>
				</view>
			</view>
			<!-- 详细地址 -->
			<view class="lrmg-30 fsb" style="height: 110rpx;border-bottom: 1rpx solid #F0F0F0;">
				<view class="" style="width: 20%;">
					<text style="color: #F55050;">*</text>
					<text class="f32" style="color: #323232;">详细地址</text>
				</view>
				<view class="flex aic" style="width: 75%;">
					<input type="text" placeholder="请填写详细地址" v-model="xx_dizhi" style="color: #323232;text-align: right;width: 100%;" placeholder-style="color:#909090" class="f28" />
				</view>
			</view>
			<!-- 联系方式 -->
			<view class="lrmg-30 fsb" style="height: 110rpx;border-bottom: 1rpx solid #F0F0F0;">
				<view class="" style="width: 20%;">
					<text style="color: #F55050;">*</text>
					<text class="f32" style="color: #323232;">联系方式</text>
				</view>
				<view class="flex aic">
					<input type="text" placeholder="请填写联系方式" v-model="lianxi" style="color: #323232;text-align: right;" placeholder-style="color:#909090" class="f28" />
				</view>
			</view>
			<!-- 营业时间 -->
			<view class="lrmg-30 fsb" style="height: 110rpx;border-bottom: 1rpx solid #F0F0F0;" @click="showActions">
				<view class="" style="width: 20%;">
					<text style="color: #F55050;">*</text>
					<text class="f32" style="color: #323232;">营业时间</text>
				</view>
				<view class="flex aic">
					 <picker mode="time" :value="time" start="09:00" end="22:00" @change="bindTimeChange">
						<view class="flex aic">
							<view class="" :class="[time == '请选择' ? 'aa' : 'bb']">{{time}}</view>
						</view>
					</picker>
					<view class="lrmg-20" style="color: #909090;">-</view>
					<picker mode="time" :value="times" start="18:00" end="22:00" @change="bindTimeChanges">
						<view class="flex aic">
							<view class="" :class="[times == '请选择' ? 'aa' : 'bb']">{{times}}</view>
							<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/right.png" style="width:12rpx;height:20rpx" class="mg-l-20"></image>
						</view>
					</picker>
				</view>
			</view>
			<!-- 医院图片 -->
			<view class="" style="margin: 40rpx 30rpx 0;">
				<view class="">
					<!-- <text style="color: #F55050;">*</text> -->
					<text class="f30" style="color: #323232;">医院图片<text style="font-size: 26rpx;color: #909090;">（医院正门照，仅可上传一张）</text></text>
				</view>
				<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/mykehu/tt1.png" style="width:268rpx;height:164rpx" class="mg-t-30" @click="shangchuan()" v-show="img == ''"></image>
				<image :src="img" style="width:268rpx;height:164rpx" class="mg-t-30 bra10" @click="shangchuan()" v-show="img != ''" mode="aspectFill"></image>
			</view>
			<view class="h2 w100pc"></view>
		</view>
		<view class="" style="height: 200rpx;width: 100%;"></view>
		<view class="flex aic" style="position: absolute;z-index: 99;bottom: 100rpx;left: 0;width: 100%;">
			<!-- <button class="f28" style="background: #FF8F2B;color: #fff;width: 40%;" @click="quit">返回登录</button> -->
			<button class="f28 bra60" style="background: #FF8F2B;color: #fff;width: 80%;" @click="submit">提交</button>
		</view>
		<u-popup v-model="show" mode="center" border-radius="20" :mask-close-able="false">
			<view class="" style="width: 550rpx;background: #fff;">
				<view class="h4 w100pc"></view>
				<view class="f36" style="text-align: center;font-weight: bold;color: #323232;">
					提交成功
				</view>
				<view class="f28 mg-t-20" style="text-align: center;color: #323232;">
					审核通过后
				</view>
				<view class="f28" style="text-align: center;color: #323232;">
					可在个人档案内设置就职医院
				</view>
				<view class="h4 w100pc" style="border-bottom: 1rpx solid #EBEBEB;"></view>
				<view class="fcc" style="height: 100rpx;width: 100%;" @click="back">
					<view class="f32" style="color: #FE7600;">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	var that
	import publicHead from "@/components/publicHead/publicHead.vue"
	export default {
		components: {
			publicHead
		},
		data() {
			return {
				title: '就职医院',
				name: '',
				diqu:'',
				xx_dizhi:'',
				lianxi:'',
				address:{City:'',Country:'',Province:''},
				time: '请选择',
				times: '请选择',
				img:'',
				show:false
			}
		},
		onLoad(options) {
			that = this
		},
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			shangchuan(){
				uni.chooseImage({
					count: 1,
					sourceType: ['camera','album'],
					success: (res) => {
						console.log(res)
						 uni.getImageInfo({
							src: res.tempFilePaths[0],
							success: function (image) {
								let temp = {
									width:image.width,
									height:image.height,
									status:6
								}
								that.$util.uploadimgs('Doctor_uploadFile',res.tempFilePaths[0],temp,function(data){
									console.log(data.data)
									data = JSON.parse(data.data)
									if(data.code == 1){
										that.img = data.data.url
										console.log(that.img);
									}else{
										uni.showToast({
											title: '上传失败',
											icon: 'none',
											duration: 1500
										});
									}
								})
							}
						});
					}
				})
			},
			submit(){
				if(that.name == ''){
				uni.showToast({
					title: '请输入医院名称',
					icon: 'none',
					duration: 1500
				});
				return
				}
				if(that.diqu == ''){
				uni.showToast({
					title: '请选择所在地区',
					icon: 'none',
					duration: 1500
				});
				return
				}
				if(that.xx_dizhi == ''){
				uni.showToast({
					title: '请输入详细地址',
					icon: 'none',
					duration: 1500
				});
				return
				}
				if(that.lianxi == ''){
				uni.showToast({
					title: '请输入联系方式',
					icon: 'none',
					duration: 1500
				});
				return
				}
				if(that.time == '请选择' || that.times == '请选择'){
				uni.showToast({
					title: '请选择营业时间',
					icon: 'none',
					duration: 1500
				});
				return
				}
				if(that.img == ''){
				uni.showToast({
					title: '请上传医院正面照',
					icon: 'none',
					duration: 1500
				});
				return
				}
				uni.showLoading({
					mask: true,
					title: '加载中...'
				});
				let postData = {
					name:that.name,
					address:that.xx_dizhi,
					contact:that.lianxi,
					open_hours:that.time + '-' + that.times,
					img:that.img,
					longitude:that.diqu.longitude,
					latitude:that.diqu.latitude,
				}
				that.$postAjax1('Doctorsside_doctor_info',postData,function(data){
					uni.hideLoading()
					that.show = true
				})
			},
			// 定位
			showAction(){
				uni.chooseLocation({
				    success: function (res) {
				        console.log(res);
						that.chuli(res)
						that.diqu = res
				    }
				});
			},
			// 处理异步
			async chuli(res){
				that.address = await that.getArea(res.address)
				console.log(that.address);
				that.xx_dizhi = that.jiequ(res.address,that.address.Country)
				// console.log(that.xx_dizhi);
			},
			showActions(){
				
			},
			// 截取指定字符后面的所有字符串
			jiequ(str,aa){
				let index = str.lastIndexOf(aa)
				console.log(index);
				str = str.substring(index+aa.length,str.length);
				console.log(str);
				return str
			},
			// 截取省市区
			getArea(str) {
				console.log(str);
				let getData = () => {
					let area = {}
					let index11 = 0
					let index1 = str.indexOf("省")
					if (index1 == -1) {
					  index11 = str.indexOf("自治区")
					  if (index11 != -1) {
					    area.Province = str.substring(0, index11 + 3)
					  } else {
					    area.Province = str.substring(0, 0)
					  }
					} else {
					  area.Province = str.substring(0, index1 + 1)
					}
								 
					let index2 = str.indexOf("市")
					if (index11 == -1) {
					  area.City = str.substring(index11 + 1, index2 + 1)
					} else {
					  if (index11 == 0) {
					    area.City = str.substring(index1 + 1, index2 + 1)
					  } else {
					    area.City = str.substring(index11 + 3, index2 + 1)
					  }
					}
								 
					let index3 = str.lastIndexOf("区")
					if (index3 == -1) {
					  index3 = str.indexOf("县")
					  area.Country = str.substring(index2 + 1, index3 + 1)
					} else {
					  area.Country = str.substring(index2 + 1, index3 + 1)
					}
					return area;
				}
				return new Promise((resolve, reject) => {
					const data = getData();
					setTimeout(() => {
						resolve(data);
					}, 500);
				});
			},
			bindTimeChange: function(e) {
			    this.time = e.target.value
			},
			bindTimeChanges: function(e) {
			    this.times = e.target.value
			},
		}

	}
</script>
<style scoped lang="scss">
.aa{color: #909090;}
.bb{color: #323232;}
.box {
	background: #FFFFFF;
	.box1 {
		width: 100%;
		display: flex;
		.left {
			// display: inline-block;
			width: 30%;
			background: #f6f6f6;
			.scroll {
				padding: 30rpx 50rpx 30rpx 30rpx;
				color: #8a8a8a;
				&.active {
					color: #FA6400;
					background-color: #FFFFFF;
				}
			}
		}
		.right {
			// display: inline-block;
			width: 70%;
			.scroll {
				padding: 30rpx 50rpx 30rpx 30rpx;
				color: #8a8a8a;
				&.active {
					color: #FA6400;
					//background-color: #FFFFFF;
				}
			}
		}
	}
}
</style>
